* {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-image: url("/image/bg_common.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.layout-header-wrapper {
    width: 100%;
}

.layout-body-wrapper {
    width: 100%;
}

.layout-footer-wrapper {
    width: 100%;
    margin: 20px 0 0 0;
    background-image: url('/image/bg_footer.jpg');
    background-repeat: no-repeat;
    background-position: center;
}

.layout-header, .layout-body, .layout-footer {
    width: 1024px;
    margin: 0 auto;
}

.layout-header {
    height: 100px !important;
    padding-bottom: 20px;
}

.layout-header h1 {
    margin: 0;
    padding: 0;
    height: 100px;
    line-height: 100px;
    text-align: left;
    color: #333;
    font-size: 32px;
    font-weight: bold;
}

.layout-body {
}

.layout-body .profile {
    height: 300px;
}

.layout-body .profile .info {
}

.layout-body .profile .info h1 {
    margin: 0;
    padding: 0;
    line-height: 64px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.layout-body .profile .info p {
    margin: 0;
    padding: 0;
    line-height: 24px;
    height: 130px;
    text-align: justify;
    text-justify: inter-word;
    text-indent: 2em;
    color: #696969;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

.layout-body .profile .info .btn-wrapper {
    margin: 0;
    padding: 20px 0;
    text-align: left;
}

.layout-body .profile .info .btn-wrapper .btn {
    border: 1px solid #409eff;
    background: transparent;
    width: 160px;
    height: 36px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #3a4856;
    margin-right: 20px;
}

.layout-body .profile .info .btn-wrapper .btn:hover {
    background: #d1e7fc;
}

.layout-body .profile .photo-wrapper {
    text-align: right;
}

.layout-body .profile .photo {
    width: 195px;
    height: 260px;
}

.project-list {
    margin-top: 20px;
}

.project-list h1 {
    margin: 0;
    padding: 0;
    line-height: 80px;
    height: 80px;
    font-size: 28px;
    font-weight: bold;
}

.project-item {
    margin-bottom: 30px;
    height: 380px;
    text-align: left;
    cursor: pointer;
}

.project-item .image {
    width: 100%;
    height: 200px;
}

.project-item h2 {
    margin: 0;
    padding: 0 20px;
    line-height: 48px;
    font-size: 18px;
    font-weight: normal;
    color: #333;
}

.project-item .tag-list {
    margin: 16px 0 0 0;
    padding: 0 20px;
}

.project-item .tag-list .tag {
    display: inline-block;
    margin-right: 10px;
    font-size: 11px;
    padding: 3px 15px;
    border: 1px solid #409eff;
    border-radius: 3px;
    background: #fff;
    color: #409eff;
}

.project-item .summary {
    padding: 0 20px;
    text-align: justify;
    text-justify: inter-word;
    font-size: 14px;
    color: #696969;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.project-item:hover {
    background: #f3f3ff;
    border: 1px solid #ccc;
}

.project-item:hover h2 {
    color: #1784f3;
}

.project-item:hover .summary {
    color: #000;
}

.layout-footer {
    text-align: left;
    padding: 30px 0;
}

.layout-footer h1 {
    margin: 0;
    padding: 0;
    line-height: 36px;
    height: 60px;
    font-size: 28px;
    font-weight: bold;
    color: #de4c11;
}

.layout-footer .row {
}

.layout-footer .row span {
    line-height: 32px;
    font-size: 14px;
    color: #696969;
}

.layout-footer .row a {
    line-height: 32px;
    font-size: 14px;
    color: #1784f3;
    text-decoration: none;
    cursor: pointer;
}

.layout-footer .row a:hover {
    color: #0570dd;
    text-decoration: underline;
}

.common-drawer { }
.common-drawer .title { font-weight: bold; font-size: 20px; color: #333; }
.common-drawer .content { padding: 0px 30px 30px 30px; }
.common-drawer .content .cover-image-wrapper { text-align: center; }
.common-drawer .content .cover-image-wrapper .cover-image { width: 100%; height: 300px; }
.common-drawer .content .details-wrapper { margin-top: 20px; }
.common-drawer .content .details-wrapper .info-table { }
.common-drawer .content .details-wrapper .info-table td { border-width: 0px; padding: 10px 6px; color: #75777a; font-size: 14px; vertical-align: top; line-height: 24px; border-bottom: 1px solid #ebeef5; }
.common-drawer .content .details-wrapper .info-table tr:last-child td { border-bottom: none; }
.common-drawer .content .details-wrapper .info-table .label { width: 80px; font-weight: bold; text-align: right; }
.common-drawer .content .details-wrapper .info-table .value { }
.common-drawer .content .details-wrapper .info-table .value .tag { display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    padding: 1px 15px;
    border: 1px solid #409eff;
    border-radius: 3px;
    background: #fff;
    color: #409eff;
}